<template>
  <div class="case-verify-block">
    <div class="case-verify-dress">
      <a-radio-group default-value="3" button-style="solid" @change="onChange">
        <a-radio-button value="3">全 部</a-radio-button>
        <a-radio-button value="0">未审核</a-radio-button>
        <a-radio-button value="1">审核通过</a-radio-button>
        <a-radio-button value="2">审核未通过</a-radio-button>
      </a-radio-group>
    </div>
    <div class="case-verify-table">
      <a-table :columns="columns" :data-source="verifyList" :loading="isLoading"
               :customRow="clickSingleRow" :pagination="pagination" bordered>
      </a-table>
    </div>
  </div>
</template>

<script>
  import GLOBAL from '@/api/global_variable'
  import api from '@/server/userConfig';
  export default {
    name: 'CaseVerify',
    props: {
      userName: String
    },
    data () {
      const columns = [
        {
          title: '案例类型',
          dataIndex: 'caseType',
          key: 'caseType',
          width: '120px',
          customRender: (text, row) => {
            if (row.caseType === '故障案例') {
              return <div class="table-fault-case">故障</div>;
            } else if (row.caseType === '调试案例') {
              return <div class="table-debug-case">调试</div>;
            } else if (row.caseType === '工艺案例') {
              return <div class="table-technology-case">工艺</div>;
            }
          },
        },
        {
          title: '案例名称',
          dataIndex: 'caseName',
          key: 'caseName',
          width: '250px',
          ellipsis: true,
        },
        {
          title: '解决方案',
          dataIndex: 'solutionAmendment',
          key: 'solutionAmendment',
          width: '400px',
          ellipsis: true,
        },
        {
          title: '上传者',
          dataIndex: 'name',
          key: 'name',
          width: '150px',
        },
        {
          title: '联系方式',
          dataIndex: 'username',
          key: 'username',
        },
        {
          title: '上传时间',
          dataIndex: 'uploadtime',
          key: 'uploadtime',
        },
        {
          title: '审核状态',
          dataIndex: 'approval',
          key: 'approval',
          customRender: (text, row) => {
            const approval = row.approval;
            var a = "";
            if(approval == 0) {
              a = <span style="padding: 2px 7px;">未审核</span>;
            }else if(approval == 1){
              a = <span style="padding: 2px 7px;">已审核</span>;
            }else if(approval == 2) {
              a = <span style="padding: 2px 7px;">已审核</span>;
            }
            return a;
          },
        },
        {
          title: '审核结果',
          dataIndex: 'approval',
          key: 'approval1',
          customRender: (text, row) => {
            const approval = row.approval;
            var a = "";
            if(approval === 1){
              a = <span style="padding: 2px 7px; color: #00CD00">审核通过</span>;
            }else if(approval === 2) {
              a = <span style="padding: 2px 7px; color: #CD3333">审核未通过</span>;
            }
            return a;
          },
        },
      ];
      return {
        verifyList: [],
        isLoading: false,
        columns,
        pagination: {
          page: 1,
          pageSize: 8, // 默认每页显示数量
          pageSizeOptions: ['5', '10', '15', '20'],
          onShowSizeChange: (page, pageSize) => this.pageSize = pageSize,
        },
      }
    },
    mounted () {
      this.getVerifyList(this.userName, 3);
    },
    methods: {
      // 获取审核列表;
      async getVerifyList (username, state) {
        this.isLoading = true;
        const res = await api.reqGetVerifyList({username: username, state: state});
        this.isLoading = false;
        console.log(res);
        if (res.MsgCode !== 0) {
          this.verifyList = [];
          return;
        }
        let verifyList = res.Data;
        const verifyListLength = verifyList.length;
        for(let i = 0; i < verifyListLength; i++){
          verifyList[i].key = verifyList[i].id;
          if (verifyList[i].solution.length > 0){
            verifyList[i].solutionAmendment = verifyList[i].solution[0].solution;
          }else {
            verifyList[i].solutionAmendment = '';
          }
        }
        this.verifyList = verifyList;
      },
      onChange (e) {
        this.getVerifyList(this.userName, e.target.value);
      },
      clickSingleRow (record, index) {
        return {
          on: {
            click: () => {
              // 实现跳转;
              window.open(`/#/caseDetail?id=${record.id}`)
            }
          }
        }
      },
    }
  }
</script>

<style scoped="scoped">
@import "./style.css";
</style>
